<template>
    <div>
       <!--1顶部搜索框 引入组件-->
    <search @search="handleSearch"></search>
        <!--2main-->
    <div class="main-box">
        <div class="block" style="width: 1400px ;margin: 10px auto">
          <!--2.1类别菜单            -->
        <div class="block" style="width: 1800px ;margin: 10px auto">
            <div class="good-menu">
                <ul v-for="(item,index) in icons" :key="index">
<!--                    li列表项元素，表示类别菜单项-->
                    <li>
<!--                        v-html 指令将 item.value 渲染为 HTML 内容，用于显示图标。-->
                        <i class="iconfont" v-html="item.value"></i>
                        <!--跳转到goodList页面，参数为类别id-->
                        <router-link :to="{path: '/goodlist',query: {categoryId:  item.id }}">
                            <a href="/person"><span>{{ item.name }}</span></a>
                        </router-link>

                    </li>
                </ul>
            </div>

        </div>
        <!--2.2轮播图-->
        <div>
            <!-- <el-carousel height="370px" style="border-radius:20px;width: 600px;margin-left:400px">
                <el-carousel-item v-for="carousel in carousels" :key="carousel.id">
                    <router-link :to="'/goodview/'+carousel.goodId">
                        <img style="height: 370px;width: 600px;" :src="carousel.img"/>
                    </router-link>
                </el-carousel-item>
            </el-carousel> -->

            <div class="home-banner">
                <el-carousel height="500px">
                    <el-carousel-item v-for="carousel in carousels" :key="carousel.id">
                        <router-link :to="'/goodview/'+carousel.goodId">
                            <img style="height: 450px;width: 80%;" :src="carousel.img"/>
                        </router-link>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        </div>
<!--        2.3推荐商品-->
        <div style="margin-top: 30px">
            <span style="color: #ff5e5e">推荐商品</span>
        </div>
        <div style="width: 1300px;margin: 20px auto;">
            <el-row :gutter="20">
                <!--   el-row 栅格系统组件       -->
                <el-col :span="6" v-for="good in goods" :key="good.id" style="margin-bottom: 20px ">
                    <!--  good in good循环遍历每个商品对象 在每个栅格内进行展示          -->
                    <router-link :to="'goodview/'+good.id">
                        <el-card :body-style="{ padding: '0px',background: '#e3f5f4' }">
                            <img :src="good.imgs" style="width: 100%;height: 300px">
                            <div style="padding:5px 10px;">
                                <!--                  包裹商品的名称和价格信息-->
                                <span style="font-size: 18px">{{good.name}}</span><br/>
                                <template v-if="good.role === 'vip' "> <span style="color: red;font-size: 15px">会员价：{{ (good.price * good.discount).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}</span> </template>
                                <template v-if="good.role === 'user' "> <span style="color: red;font-size: 15px">￥{{ good.price }}</span> </template>
                                <template v-if="good.role === 'admin' "> <span style="color: red;font-size: 15px">会员价：{{ (good.price * good.discount).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}</span> </template>
                            </div>
                        </el-card>
                    </router-link>
                </el-col>
            </el-row>
        </div>

    </div>

    </div>
</template>



<script>
import search from "../../components/Search"
export default {
    name: "TopView",
    data(){
       return{
           searchText:'',
           //分类icon，每个icon包含id、value、categories对象数组.category：id，name
           icons:[],
           //轮播图
           carousels: [],
           //推荐商品
           goods:[],
           user: {},
       }
    },
    components:{
        search,
    },
    created() {
        //  1.从浏览器的localStorage 中获取名为 'user' 的存储项，赋值给组件的user数据属性
        this.user = localStorage.getItem('user')
        console.log(this.user)
        //3.get请求获取商品类别列表   所有类别显示
        this.request.get("/api/category/list").then(res=>{
            if(res.code==='200'){
                //  成功，将类别数据存储到组件的‘icons’中
                this.icons = res.data;
            }
        })
        //4.get 获取轮播图数据
        this.request.get("/api/carousel").then(res=>{
            if(res.code==='200'){
                //  将轮播图数据存储到组件carousel中
                this.carousels = res.data;
            }
        })
        //2.get请求后端获取推荐的商品信息
        this.request.get("/api/good").then(res=>{
                if(res.code==='200'){
                    //  则将商品数据存储到组件的 good 数据属性中
                    this.goods = res.data;
                }else {
                    this.$message.error(res.msg);
                }
            }
        )

    },
    methods:{
//  定义handleSearch方法，该方法更新搜索文本并导航到GoodList页面
        handleSearch(text){
            this.searchText = text;
            this.$router.push({path:'/goodList',query:{searchText: this.searchText}})
        }
    }
}

</script>

<style scoped lang="less">
    /*@import "../../resource/css/icon.css";*/
    .main-box{
        background-color: #e1dae5;
        width: 1300px;
        border: #eeebf1 2px solid;
        border-radius: 40px;
        padding: 20px 40px;
        margin: 5px auto;
    }
    .good-menu{
        float: left;
        height: 370px;
        margin-right: 130px;
    }
    .good-menu li{
        list-style: none;
        overflow: hidden;
        margin-bottom: 35px;

    }
    /*字体*/
    .good-menu li a,span{
        font-size: 20px;
        color: #6c6969;
    }
    .good-menu a span:hover{
        color: #00b7ff;
    }

</style>
